<template>
    <div id="onlineServer">
        <!-- <el-container> -->
             <el-main>
          <table  style="margin-left: 15%;" >
              <tr >
                  <td colspan="8"><img src="https://z3.ax1x.com/2021/08/24/hA2gtH.gif"></td>
                  <td rowspan="3"><img src="https://z3.ax1x.com/2021/08/24/hAWeRs.jpg" height="150px"></td>
                  </tr>
               <tr>
                 <td width="100px"  style="text-align: center" >  <div @click="chashuifei" style="cursor:pointer"><img src="https://z3.ax1x.com/2021/08/25/hePqV1.png"><p >水费查询</p></div></td>
                    <td width="100px"  style="text-align: center" ><div @click="jiaofei" style="cursor:pointer"><img src="https://z3.ax1x.com/2021/08/24/hAmD4x.png"><p>用户缴费</p></div></td>
                    <td width="100px"  style="text-align: center" ><div @click="shoufeibiaozhun" style="cursor:pointer"><img src="https://z3.ax1x.com/2021/08/25/heiNM4.png"><p>收费标准</p></div></td>
                    <td width="100px"  style="text-align: center" ><div @click="dianzifapiao" style="cursor:pointer"><img src="https://z3.ax1x.com/2021/08/25/he9vo6.png"><p>电子发票申领</p></div></td>
                    <td width="100px"  style="text-align: center" ><div @click="wangshangbaozhuang" style="cursor:pointer"><img src="https://z3.ax1x.com/2021/08/24/hAbw38.png"><p>网上报修</p></div></td>
                    <td width="100px"  style="text-align: center" ><div @click="wangshangbaoxiu" style="cursor:pointer"><img src="https://z3.ax1x.com/2021/08/24/hAbw38.png"><p>网上报装</p></div></td>
                    <td width="100px"  style="text-align: center" ><div @click="tingshuigonggao" style="cursor:pointer"><img src="https://z3.ax1x.com/2021/08/24/hAb0gS.png"><p>停水公告</p></div></td>
                    <td width="100px"  style="text-align: center" ><div @click="kuhuxuzhi" style="cursor:pointer"><img src="https://z3.ax1x.com/2021/08/24/hAbd9f.png"><p>客户须知</p></div></td>
             </tr>
        </table>


<el-row type="flex">
  <el-col :span="10" :offset="2">   
       <el-table
      :data="redian"
      style="width: 100%"
      height="200"
      @row-click="findredian">
      <el-table-column
        prop="detailsName"
        label="武水热点"
        width="330">
      </el-table-column>
      
      <el-table-column
        prop="starTime"
        label=""
        width="250"
        fixed=right>

      </el-table-column>
    </el-table>
    </el-col>
        

    <el-col :span="10" :offset="0">   
      <el-table
      :data="huanjing"
      style="width: 100%"
       height="200"
      @row-click="findhuanjing">
   <el-table-column
        prop="detailsName"
        label="优化营商环境" 
        width="330"
        >
  

      </el-table-column>
     
      <el-table-column
        prop="starTime"
        label=""
        width="250">

      </el-table-column>
    </el-table>
    </el-col>
  
</el-row>


      <el-row type="flex">
  <el-col :span="10" :offset="2">   
       <el-table
      :data="xueshi"
      style="width: 100%"
       height="200"
       @row-click="findxueshi">
      <el-table-column
        prop="detailsName"
        label="学史力行"
        width="330">
      </el-table-column>
      
      <el-table-column
        prop="starTime"
        label=""
        width="250">

      </el-table-column>
    </el-table>
    </el-col>
  
    <el-col :span="10" :offset="0">   
       <el-table
      :data="dangfeng"
      style="width: 100%"
       height="200"
       @row-click="finddangfeng">
      <el-table-column
        prop="detailsName"
        label="党风廉政"
        width="330" >
        
       
     
      </el-table-column>
      
      <el-table-column
        prop="starTime"
        label=""
        width="250">

      </el-table-column>
    </el-table>
    </el-col>
  
</el-row>


    



</el-main>
<!-- </el-container> -->
    <el-divider></el-divider>

<Footer style="text-align: center"></Footer>


    </div>
</template>


<script> 

import Footer from '@/components/Footer.vue'
export default {

    name:"onlineServer",
    data(){
        return{
  activeName: 'second',

   //武水热点数据
     redian: [{
            detailsName:"",
            starTime: ''
          }],
          // 优化营商环境数据
     huanjing:[{
       detailsName:"",starTime:""
     }],
    //  学史力行数据
      xueshi:[{
       detailsName:"",starTime:""
     }],
    //  党风廉政数据
      dangfeng:[{
       detailsName:"",starTime:""
     }]   
        }
    },
    // 组件
    components: {
    Footer
  },
    methods: {
      

      //水费查询
      chashuifei(){
        this.$router.push("waterChargeQuery");
      },
      // 用户缴费
      jiaofei(){
         this.$router.push("payMent");
      },
      //收费标准
       shoufeibiaozhun(){
          console.log("收费标准")
       },
       //电子发票申领
       dianzifapiao(){
         this.$router.push("getBill");
       },
      //  网上报修
      wangshangbaoxiu(){
        this.$router.push("repairAndAdd");
      },
      //  网上报装
      wangshangbaozhuang(){
        this.$router.push("addAndRepair");
      },
    // 停水公告
      tingshuigonggao(){
        this.$router.push({name:"NewsCenter",params:{id:5,uid:24,detailsId:16}})
         console.log("停水公告")

      },
      // 收费标准
      shoufeibiaozhun(){
        this.$router.push({name:"NewsCenter",params:{id:5,uid:32,detailsId:17}})
         console.log("收费标准")

      },
      // 客户须知
      kuhuxuzhi(){
         console.log("客户须知")
          this.$router.push({name:"NewsCenter",params:{id:5,uid:31,detailsId:45}})

      },
      //获得热点数据
           getReDian(){
              this.$http.get("details/getDetails",{
                    params:{detailsId:14}})
                .then(response=>{//成功处理
              this.redian=response.data.object
                console.log(response.data.object);
                console.log(this.redian);
              })
              .catch(function (error) {//失败处理
                console.log(error);
              });
            },

              //获得营商环境数据
           getHuanJing(){
              this.$http.get("details/getDetails",{
                    params:{detailsId:13}})
                .then(response=>{//成功处理
              this.huanjing=response.data.object
                console.log(response.data.object);
                console.log(this.huanjing);
              })
              .catch(function (error) {//失败处理
                console.log(error);
              });
            },

            // 获得学史力行
           getXueShi(){
              this.$http.get("details/getDetails",{
                    params:{detailsId:11}})
                .then(response=>{//成功处理
              this.xueshi=response.data.object
                console.log(response.data.object);
                console.log(this.xueshi);
              })
              .catch(function (error) {//失败处理
                console.log(error);
              });
            },
            // 获得党风廉政
           getDangFeng(){
              this.$http.get("details/getDetails",{
                    params:{detailsId:18}})
                .then(response=>{//成功处理
              this.dangfeng=response.data.object
                console.log(response.data.object);
                console.log(this.dangfeng);
              })
              .catch(function (error) {//失败处理
                console.log(error);
              });
            },
            //点击武水热点信息跳转
      findredian(row,column,event,cell){

        // this.$router.push({path:"/news/:"+row.classifyId+"/:"+row.detailsId,params:{cid:this.redian.cid}})
	        this.$router.push({name:"NewsCenter",params:{id:3,uid:row.classifyId,detailsId:row.detailsId}})
      },  
      // 点击营商环境信息跳转
      findhuanjing(row){
        // this.$router.push({name:"NewsCenter",params:{id:row.classifyId,uid:row.detailsId}})
         this.$router.push({name:"NewsCenter",params:{id:2,uid:row.classifyId,detailsId:row.detailsId}})
        console.log(row)
      },
      // 点击学史力行跳转
      findxueshi(row){
        // this.$router.push({name:"NewsCenter",params:{id:row.classifyId,uid:row.detailsId}})
         this.$router.push({name:"NewsCenter",params:{id:6,uid:row.classifyId,detailsId:row.detailsId}})
        console.log(row)
      },
      // 点击党风廉政跳转
      finddangfeng(row){
        // this.$router.push({name:"NewsCenter",params:{id:row.classifyId,uid:row.detailsId}})
        this.$router.push({name:"NewsCenter",params:{id:4,uid:row.classifyId,detailsId:row.detailsId}})
        console.log(row)
      },
    },
     //初始化界面
  mounted(){
    this.getReDian()
    this.getHuanJing()
    this.getXueShi()
    this.getDangFeng()
  },
}
</script>

<style>
a {
  text-decoration: none,
  color=darkgray
}
</style>
